<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Window Widget Demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />
    <style>
    html{height:100%;overflow:auto;}
    body.ifm-body{height:100%;padding:0;position:relative;background:#dfdfdf;}
    #windowpanel{margin:50px 0 0 50px;}
    .toolbar{margin:10px 50px;border:1px solid #999;background:#f0f0f0;position:relative;z-index:9999;}
    #selectTheme,#setStep,#setGrid{float:right;margin:0 10px 0 0;}
    </style>
</head>
<body class="ifm-body" id="windowdemo">
    <h2 class="til" id="windowpanel">Window Widget</h2>
    <div class="toolbar clearfix">
        <div id="setStep"></div>
        <div id="setGrid"></div>
        <div id="selectTheme"></div>
    </div>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type="text/javascript" src="../lib/jquery.json.min.js"></script>



<script src="../js/ui/util.js"></script>
<script type="text/javascript" src="../js/ui/window.js"></script>
<script>
    var wwg=new Util.WindowGroup('windowdemo',{},{});
    var ww = new Util.RtqWindow('windowdemo',{},{});
    ww.setHtml('I hate snap to grid!');
    var ww2 = new Util.RtqWindow('windowdemo',{},{});
    ww2.setHtml('Test');   
    wwg.register(ww);
    wwg.register(ww2);
    var snapToGridMenu = new Util.DropDownList($('#setGrid')[0], function(t, v){
        switch(v){
            case '0':{
                document.body.style.background='#dfdfdf';
                wwg.setConfig({gridUnit:0});
                ww.setHtml('I hate snap to grid!');
            }break;
            case '20':{
                document.body.style.backgroundImage='url(../IM/bg_grid_20.gif)';
                wwg.setConfig({gridUnit:20});
                ww.setHtml('I snap to 20*20 grid');
            }break;
            case '40':{
                document.body.style.backgroundImage='url(../IM/bg_grid_40.png)';
                wwg.setConfig({gridUnit:40});
                ww.setHtml('I snap to 40*40 grid');
            }break;
            case '100':{
                document.body.style.backgroundImage='url(../IM/bg_grid_100.png)';
                wwg.setConfig({gridUnit:100});
                ww.setHtml('I snap to 100*100 grid');
            }break;            
        }
    }, [{
        txt: 'No Grid',
        val: 0
    },{
        txt: 'Grid 20',
        val: 20
    }, {
        txt: 'Grid 40',
        val: 40,
        closable: false
    }, {
        txt: 'Grid 100',
        val: 100
    }], {
        width: 100
    });
    var setStep = new Util.DropDownList($('#setStep')[0], function(t, v){
        switch(v){
            case '0':{
                wwg.setConfig({everyStep:false});
            }break;
            case '1':{
                wwg.setConfig({everyStep:true});
            }break;            
        }
    }, [{
        txt: 'Snap to Grid in final',
        val: 0
    },{
        txt: 'Snap to Grid in every step',
        val: 1
    }], {
        width: 180
    });
    var selectTheme = new Util.DropDownList($('#selectTheme')[0], function(t, v){
        switch(v){
            case '0':{
                document.body.style.backgroundColor='#dfdfdf';
            }break;
            case '1':{
                document.body.style.backgroundColor='#313131';
            }break; 
            case '2':{
                document.body.style.backgroundColor='#333';
            }break;           
        }
    }, [{
        txt: 'Default',
        val: 0
    },{
        txt: 'Black',
        val: 1
    },{
        txt: 'Gray',
        val: 2
    }], {
        width: 90
    });
</script>
</body>
</html>
